<template>
  <!-- 详情页 -->
  <div class="sub">
    <!-- 侧边栏开始 -->
    <sidebar></sidebar>
    <!-- 侧边栏结束 -->
    <div class="box">
      <!-- 头部 -->
      <topnav></topnav>

      <!-- 商品下拉列表 -->
      <div class="nav_frm">
        <!-- 所有产品 -->
        <div class="frm_all">
          <p>所有产品<span class="iconfont icon-lolxiajiantou"></span></p>
          <div class="frm_all_box">
            <div
              class="frm_all_list"
              v-for="item in homeMain"
              :key="item.homeId"
            >
              <router-link to="/sub" tag="p">{{ item.homeTitle }}</router-link>
            </div>
          </div>
        </div>
        <!-- 所有频道 -->
        <div class="frm_all">
          <p>所有频道<span class="iconfont icon-lolxiajiantou"></span></p>
          <div class="frm_all_box">
            <div class="frm_all_list">
              <p>光明食品</p>
            </div>
            <div class="frm_all_list">
              <p>天天特价</p>
            </div>
            <div class="frm_all_list">
              <p>企业团购</p>
            </div>
          </div>
        </div>
        <!-- 商品右侧列表 -->
        <div class="frm_title">
          <ul class="frm_title_ul clearfix">
            <li><span></span>好侍食品系列</li>
            <li style="color: #000">崇明羊肉</li>
            <li>光明崇明农场大闸蟹</li>
            <li style="color: #000">海鲜方便菜</li>
            <li>客服咨询公告</li>
          </ul>
        </div>
      </div>
      <!-- 选择商品类型 -->
      <div class="navtfrm">
        <p class="navtf">
          <router-link to="/home"
            ><span class="navtf_home">首页</span></router-link
          >
          <span class="navtf_span iconfont icon-jiantouyou"></span>
        </p>
        <select
          id="category_class"
          style="width: 130px; height: 30px; float: left"
        >
          <option v-for="(item, index) in homeMain" :key="index" value="295">
            {{ item.homeTitle }}
          </option>
          <!-- <option value="295">光明食品</option> -->
        </select>
      </div>
      <!-- 商品内容 -->
      <div class="classbody">
        <!-- 商品内容 -->
        <div class="class_frm">
          <!-- 轮播图 -->
          <div class="ban_box">
            <div class="product_show">
              <i class="left-btn"></i>
              <i class="right-btn"></i>
              <ul class="ban_frm">
                <li>
                  <a class="imgs">
                    <!-- <img src="../assets/img/10140.jpg"> -->
                    <img src="../assets/img/10140.jpg" />
                  </a>
                  <div class="price">
                    <del>￥95</del>
                    <span>￥<b>56.4</b></span>
                  </div>
                </li>
                <li>
                  <a class="imgs">
                    <img src="../assets/img/10143.jpg" />
                  </a>
                  <div class="price">
                    <span>￥<b>56.4</b></span>
                  </div>
                </li>
                <li class="bor">
                  <a class="imgs">
                    <img src="../assets/img/10142.jpg" />
                  </a>
                  <div class="price">
                    <del>￥75</del>
                    <span>￥<b>56.4</b></span>
                  </div>
                </li>
                <li>
                  <a class="imgs">
                    <img src="../assets/img/10141.jpg" />
                  </a>
                  <div class="price">
                    <span>￥<b>56.4</b></span>
                  </div>
                </li>
                <li>
                  <a class="imgs">
                    <img src="../assets/img/10139.jpg" />
                  </a>
                  <div class="price">
                    <del>￥95</del>
                    <span>￥<b>56.4</b></span>
                  </div>
                </li>
              </ul>
            </div>
            <!-- <i class="left-btn"></i>
            <i class="right-btn"></i> -->
          </div>

          <div class="commodity">
            <div class="title">
              <h2>光明食品</h2>
              <select style="height: 30px" width="245" size="1">
                <option value="time">上架时间优先排列</option>
                <option value="price">价格优先排列</option>
                <option value="comment">好评数优先排列</option>
                <option value="total">销量优先排列</option>
              </select>
            </div>
            <ul class="commodity_ul" style="bottom: 80px">
              <li class="commodity_li" v-for="(item, index) in 5" :key="index">
                <div class="card clearfix">
                  <div class="card-tag">特价</div>
                  <img src="../assets/img/10012.jpg" alt="" />
                  <div class="car-p">
                    <p class="best-title2">蜜桔（云南）/2kg（16-23只）</p>
                    <p class="best-title3">
                      <del>72</del>
                      <span> ￥<b>53</b> </span>
                    </p>
                  </div>
                  <!-- 购买数量 -->
                  <div class="car-num clearfix">
                    <p class="buynum clearfix">
                      <input class="form-control" type="text" value="1" />
                      <button class="btn" type="button">+</button>
                      <button class="btn" type="button">-</button>
                    </p>
                    <div class="gdaddsc"></div>
                    <div class="buy">直接购买</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footerpage></footerpage>
  </div>
</template>

<script>
import { getHomeMian } from "../api/home.js";

import sidebar from "../components/SideBar.vue";
import topnav from "../components/TopNav.vue";
import footerpage from "../components/FooterPage.vue";
export default {
  data() {
    return {
      // 主内容
      homeMain: [],
    };
  },
  methods: {
    // 主内容
    getHomeMianFun() {
      getHomeMian().then((data) => {
        // this.homeMain = data.homeMain;

        let index = data.homeMain.findIndex(
          (item) => item.homeId == this.$route.query.id
        );
        console.log(index);
        for (var i = 0; i < data.homeMain.length; i++) {
          if (i < 6) {
            this.homeMain.push(data.homeMain[i]);
          }
        }
      });
    },
  },
  created() {
    if ("id" in this.$route.query) {
      this.getHomeMianFun();
    }
    this.getHomeMianFun();
  },
  components: {
    sidebar,
    topnav,
    footerpage,
  },
};
</script>
<style  lang="scss" scoped>
.sub {
  .ban_frm {
    width: 100%;
    height: 100%;
  }

  .ban_frm > li {
    box-shadow: 0 0 20px 2px #ccc;
  }
  .ban_frm > li.bor {
    border: 3px solid #7f0019;
  }
  .ban_frm > li img {
    width: 100%;
    height: 100%;
  }

  .ban_frm > li:nth-child(1) {
    width: 250px;
    height: 520px;
    position: absolute;
    margin-top: 60px;
    margin-left: 250px;
    z-index: 1;
  }

  .ban_frm > li:nth-child(2) {
    width: 260px;
    height: 540px;
    position: absolute;
    margin-top: 50px;
    margin-left: 450px;
    z-index: 2;
  }

  .ban_frm > li:nth-child(3) {
    width: 270px;
    height: 560px;
    position: absolute;
    margin-top: 40px;
    margin-left: 650px;
    z-index: 3;
  }

  .ban_frm > li:nth-child(4) {
    width: 260px;
    height: 540px;
    position: absolute;
    margin-top: 50px;
    margin-left: 850px;
    z-index: 2;
  }

  .ban_frm > li:nth-child(5) {
    width: 250px;
    height: 520px;
    position: absolute;
    margin-top: 60px;
    margin-left: 1050px;
    z-index: 1;
  }
  .box {
    // 选择商品类型
    .navtfrm {
      height: 27px;
      line-height: 27px;
      width: 400px;
      margin: 20px auto;
      padding-top: 3px;
      .navtf {
        float: left;
        padding: 0 15px;
        cursor: pointer;
        .navtf_home {
          margin: 0 5px;
        }
        .navtf_span {
          // margin: 0 5px;
          font-size: 15px;
        }
      }
    }
    // 商品类型
    .classbody {
      background-color: #fff;
      width: 1600px;
      margin: 0 auto;
      .class_frm {
        width: 100%;
        // 轮播图
        .ban_box {
          border: #dddddd solid 1px;
          padding: 20px;

          .product_show {
            // height: 580px;
            height: 620px;
            display: flex;
            .product {
              width: 250px;
              height: 580px;
              background-color: #e53333;
              margin: 0 auto;
            }
          }
        }
        .commodity {
          border: #dddddd solid 1px;
          padding: 20px;
          height: 100%;
          .title {
            height: 40px;
            line-height: 40px;
            background-color: #f2f2f2;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            margin-bottom: 20px;
            h2 {
              color: #7f0019;
            }
          }
          .commodity_ul {
            display: flex;
            flex-wrap: wrap;
            .commodity_li {
              width: 20%;
            }
          }
        }
      }
    }
  }
}
</style>
